<template>
    <div class="ff-add-or-replace">
        <h3 class="ff-add-or-replace--title" v-if="hasHead">
            <div>
                <span>{{title}}</span>
                <span v-if="count > 0" class="ff-add-or-replace--tips">
                    (<span class="ff-add-or-replace--count">您当前还能添加<span>{{count}}</span>款</span>)
                </span>
                <span class="ff-add-or-replace--reservation" v-if="reservationCount != null">可预订款数 <span>{{reservationCount}}</span></span>
                <span class="ff-add-or-replace--booking" v-if="bookingCount != null">已预订款数 <span>{{bookingCount}}</span></span>
            </div>
            <div class="ff-add-or-replace--pagination" v-if="pagination && paginationLocation === 'top'">
                <pagination
                    :CurrentPage.sync="CurrentPage"
                    :total="total"
                    :PageSize="PageSize"
                    @change="CurrentPageChange"
                    size="small"
                ></pagination>
            </div>
        </h3>
        <ul class="ff-add-or-replace--ul" ref="commonDetails" v-if="!noData" v-loading="loading" element-loading-text="加载中">
            <li v-for="(detail, index) of lists" :key="`${index}-${detail.ecode}`">
                <cell
                    :hide="hide"
                    :ecode="detail.ecode"
                    :name="detail.name"
                    :image-url.sync="detail.imageUrl"
                    :volume="detail.volume"
                    :week-average="detail.weekAverage"
                    :present-price="detail.presentPrice"
                    :show-focus="detail.showFocus"
                    :show-new-focus="detail.showNewFocus"
                    :focus="detail.focus"
                    :reservation="detail.reservation"
                    :is-evaluated="detail.isEvaluated"
                    :focus-sum="detail.focusSum"
                    :reservation-sum="detail.reservationSum"
                    :evaluation-sum="detail.evaluationSum"
                    :img-list="detail.imgList"
                    :disabled="detail.disabled"
                    :ranking="detail.ranking"
                    :arriveDate="detail.arriveDate"
                    :inform="detail.inform"
                    :date-up-days="detail.dateUpDaysLabel"
                    v-model="detail.checked"
                    @focusClick="focusClick($event, index)"
                    @reservationClick="reservationClick(index)"
                    @handleValueClick="handleValueClick(index, detail.checked)"
                ></cell>
            </li>
        </ul>
        <confirm-dialog
            :visible.sync="dialog.visible"
            :title="dialog.title"
            :content="dialog.content"
            @confirm="confirmOrCancelReservation"
        ></confirm-dialog>
        <div class="ff-add-or-replace--no-data" v-if="noData" v-loading="loading" element-loading-text="加载中">
            {{nodatatext}}
        </div>
        <div class="ff-add-or-replace--pagination" v-if="pagination && paginationLocation === 'bottom'">
            <pagination :CurrentPage.sync="CurrentPage" :total="total" :PageSize="PageSize" @change="CurrentPageChange"></pagination>
            <div class="ff-add-or-replace--btn">
                <button class="ff-common-btn--big" @click="goBack">返回</button>
                <button class="ff-common-btn--big ff-common-btn-confirm--big" @click="confirm">确定</button>
            </div>
        </div>
    </div>
</template>

<script>
    import cell from '@/components/grid/cell'
    import pagination from '@/components/pagination/pagination'
    import confirmDialog from '@/components/dialog/confirmDialog.vue'
    export default {
        props: {
            title: {
                type: String,
                default: ''
            },//标题信息
            count: {
                type: [Number,String],
                default: 0
            },//可以添加的款数
            getData: {
                type: Function,
                required: true
            },//获取数据的函数
            pagination: {
                type: Boolean,
                default: true
            },//是否显示分页
            paginationLocation: {
                type: String,
                default: 'bottom'
            },//分页位置
            disabled: {
                type: Boolean,
                default: false
            },//是否禁止选择
            hasHead: {
                type: Boolean,
                default: true
            },//是否显示头部
            PageSize: {
                type: [Number,String],
                default: 5
            },//每页显示个数
            refresh: {
                type: Boolean,
                default: false
            },//刷新用
            hide: {
                type: Boolean,
                default: false
            },
            refreshGetData: {
                type: Boolean,
                default: true
            },//刷新时是否重新获取数据
            nodatatext: {
                type: String,
                default: '无当前搜索的款'
            }//无款时的提示信息
        },
        data() {
            return {
                lists: [],//列表数据
                CurrentPage: 1,//当前页
                total: 0,//total
                active: -1,//选中了哪一款
                noData: false,
                loading: false,
                reservationCount: null,//可预定款数
                bookingCount: null,//已预定款数
                dialog: {
                    visible: false,
                    title: '',
                    content: '',
                }
            }
        },
        components: {
            cell,
            pagination,
            confirmDialog
        },
        watch: {
            /*刷新数据*/
            refresh (val) {
                if(val) {
                    this.CurrentPage = 1;
                    this.$emit('update:refresh', false);
                    if(!this.refreshGetData) return;
                    this.getDataFn(true);
                }
            }
        },
        methods: {
            /*收藏*/
            focusClick ($event, index) {
                if(this.lists[index].focus) {
                    this.$http({
                        url: '/api/SelPro/UnMark',
                        method: 'post',
                        data: {
                            strId: this.$store.state.userId,
                            styList: [{
                                ps_C_PRO_ECODE: this.lists[index].ecode,
                                ps_C_PRO_ID: this.lists[index].styId
                            }]
                        }
                    }).then(res => {
                        let data = res.data;
                        if(data.code === 1) {
                            this.lists[index].focus = false;
                            this.lists[index].focusSum = this.lists[index].focusSum - 1;
                        }
                    })
                }else {
                    this.$http({
                        url: '/api/SelPro/AddMark',
                        method: 'post',
                        data: {
                            strId: this.$store.state.userId,
                            styCodeList: [this.lists[index].ecode]
                        }
                    }).then(res => {
                        let data = res.data;
                        if(data.code === 1) {
                            this.lists[index].focus = true;
                            this.lists[index].focusSum = this.lists[index].focusSum + 1;
                        }
                    })
                }
            },
            /*确认或取消预定*/
            confirmOrCancelReservation () {
                if(!this.dialog.data) return;
                let status = this.dialog.data.status;
                let index = this.dialog.data.index;
                this.$http({
                    url: status? '/api/SelPro/UnOrder' : '/api/SelPro/Order',
                    method: 'post',
                    data: {
                        strId: this.lists[index].strId,//门店ID
                        styId: this.lists[index].styId,//商品id
                    }
                }).then(res => {
                    let data = res.data;
                    if(data.code === 1) {
                        this.lists[index].reservation = status? false : true;
                        this.lists[index].reservationSum = status? this.lists[index].reservationSum - 1 : this.lists[index].reservationSum + 1;
                        this.lists[index].canOrder = this.lists[index].reservation? false : true;
                        status? this.bookingCount-- : this.bookingCount++;
                    }else if(data.code === -1 && status) {
                        this.dialog = {
                            visible: true,
                            title: '不可取消预定理由',
                            content: `${data.message}`
                        }
                    }
                })
            },
            /*弹出预定弹出框*/
            reservationClick (index) {
                let status = this.lists[index].reservation;
                if(!status) {
                    //预定
                    if(!this.lists[index].canOrder) return;
                    this.dialog = {
                        visible: true,
                        title: '请确认是否预定该商品!',
                        content: '',
                        data: {
                            status: status,
                            index: index
                        }
                    }
                    //是否可取消预订
                }else{
                    this.dialog = {
                        visible: true,
                        title: '请确认是否取消预定该商品!',
                        content: '',
                        data: {
                            status: status,
                            index: index
                        }
                    }
                }
            },
            /*选中项*/
            handleValueClick (index, checked){
                if(checked) {
                    this.lists.forEach((obj, i) => (i !== index) && (obj.checked = false));
                    this.active = index;
                    return
                }
                this.active = -1;
            },
            /*当前页变化*/
            CurrentPageChange () {
                this.getDataFn();
            },
            /*赋值数据*/
            assignment (data, total, countObj) {
                this.active = -1;
                this.noData = data.length === 0;
                this.$set(this, 'lists', data);
                if(countObj) {
                    this.reservationCount = countObj.reservationCount;
                    this.bookingCount = countObj.bookingCount;
                }
                this.pagination? this.total = total : '';
                this.loading = false;
            },
            /*返回推荐款*/
            goBack () {
                this.$emit('goBack');
            },
            /*确认*/
            confirm () {
                this.$emit('confirm', this.lists.length === 0 || this.active === -1? false : this.lists[this.active]);
            },
            /*汇总方便调用 judge: 用于判断是否是刚进页面的第一次请求或搜索请求,相当于判断是否是refresh*/
            getDataFn (Judge) {
                this.loading = true;
                this.pagination? this.getData(this.CurrentPage, this.PageSize, this.assignment, Judge) : this.getData(this.assignment, Judge);
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.getDataFn(true);
            })
        },
        activated () {
            if(this.$store.state.evaluationDetail) {
                this.lists.forEach(obj => {
                    if(!this.$store.state.evaluationDetail) return;
                    if(obj.ecode === this.$store.state.evaluationDetail.ecode) {
                        obj.isEvaluated = true;
                        obj.evaluationSum++;
                        this.$store.commit('saveEvaluation', null);
                    }
                })
            }
            if(this.$store.state.reservationDetail) {
                this.lists.forEach(obj => {
                    if(!this.$store.state.reservationDetail) return;
                    if(obj.ecode === this.$store.state.reservationDetail.ecode) {
                        obj.reservation = this.$store.state.reservationDetail.status;
                        this.$store.state.reservationDetail.status? obj.reservationSum++ : obj.reservationSum--;
                        this.$store.state.reservationDetail.status? this.bookingCount++ : this.bookingCount--;
                        this.$store.commit('saveReservation', null);
                    }
                })
            }
            if(this.$store.state.collectionDetail) {
                this.lists.forEach(obj => {
                    if(!this.$store.state.collectionDetail) return;
                    if(obj.ecode === this.$store.state.collectionDetail.ecode) {
                        obj.focus = this.$store.state.collectionDetail.status;
                        this.$store.commit('saveCollection', null);
                    }
                })
            }
        }
    }
</script>

<style type="text/less" lang="less">
.ff-add-or-replace {
    width: 100%;
    .ff-add-or-replace--title {
        height: 32px;
        width: 100%;
        background-color: #F5F5F5;
        box-sizing: border-box;
        font-size: 16px;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        font-weight: 400;
        .ff-add-or-replace--tips {
            margin-left: 6px;
        }
        .ff-add-or-replace--count {
            margin: 0 4px;
            font-size: 14px;
            color: #666;
            span {
                color: #FD6442;
                padding: 0 3px;
            }
        }
        .ff-add-or-replace--reservation, .ff-add-or-replace--booking {
            font-size: 14px;
            margin-left: 52px;
            span {
                color: #FD6442;
            }
        }
    }
    .ff-add-or-replace--ul {
        padding: 0 10px;
        min-height: 430px;
        overflow: hidden;
        li {
            float: left;
            padding: 10px 0;
            margin-right: 10px;
            &:nth-child(6n) {
                margin-right: 0;
            }
        }
    }
    .ff-add-or-replace--no-data {
        text-align: center;
        box-sizing: border-box;
        padding-top: 210px;
        height: 430px;
        font-size: 18px;
        color: #666666;
    }
    .ff-add-or-replace--pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 5px;
    }
}
</style>